<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>首页</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!--引入初始化样式-->
    <link rel="stylesheet" href="css/reset.css"/>

    <!--引入整页样式-->
    <link rel="stylesheet" href="css/index.css"/>


    <!--mui-->
    <link rel="stylesheet" href="lib/mui.css"/>
    <script src="lib/mui.js"></script>

    <script src="js/jquery-1.12.2.min.js"></script>
    <script src="js/index.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<nav id="nav" class="mui-bar mui-bar-tab">
    <a id="a01" class="mui-tab-item mui-active" href="#tabbar">
        <h5><img id="a1" src="images/home_bnt_s.png" alt=""/></h5>
        <span class="mui-tab-label">首页</span>
    </a>
    <a id="b02" class="mui-tab-item" href="#tabbar-with-chat">
        <h5><img id="b2" src="images/activity_bnt_n.png" alt=""/></h5>
        <span class="mui-tab-label">活动</span>
    </a>
    <a id="c03" class="mui-tab-item" href="#tabbar-with-contact">
        <h5><img id="c3" src="images/list_bnt_n.png" alt=""/></h5>
        <span class="mui-tab-label">分类</span>
    </a>
    <a id="d04" class="mui-tab-item" href="#tabbar-with-map">
        <h5><img id="d4" src="images/my_bnt_n.png" alt=""/></h5>
        <span class="mui-tab-label">我的</span>
    </a>
</nav>
<div class="mui-content">
    <div id="tabbar" class="mui-control-content mui-active">
        <div class="one">
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade in active" id="home">
                    <div class="banner">
                        <div class="mui-slider">
                            <input id="search" type="text"/>
                            <div class="mui-slider-group mui-slider-loop">
                                <!--支持循环，需要重复图片节点-->
                                <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="images/20170824162528.png" /></a></div>
                                <div class="mui-slider-item"><a href="#"><img src="images/20170824162528.png" /></a></div>
                                <div class="mui-slider-item"><a href="#"><img src="images/181734541051503024.png" /></a></div>
                                <div class="mui-slider-item"><a href="#"><img src="images/20170824162528.png" /></a></div>
                                <div class="mui-slider-item"><a href="#"><img src="images/181734541051503024.png" /></a></div>
                                <!--支持循环，需要重复图片节点-->
                                <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="images/20170824162528.png" /></a></div>
                            </div>
                        </div>
                    </div>

                    <div class="mui-content nine">
                        <ul class="mui-table-view mui-grid-view mui-grid-9">
                            <li class="mui-table-view-cell mui-media mui-col-xs-3"><a href="introduce/index.html">
                                <img src="images/introduce_home_bnt.png" alt=""/>
                                <div class="mui-media-body">介绍</div></a></li>
                            <li class="mui-table-view-cell mui-media mui-col-xs-3"><a href="http://apis.map.qq.com/tools/poimarker?type=0&marker=coord:30.585910,114.290930;title:德润大厦;addr:湖北省武汉市江岸区黄石路9号|coord:30.613210,114.258040;title:金贸大厦;addr:湖北省武汉市江汉区邬家墩159号&key=GLPBZ-YCRKF-EV3JW-JTHZ6-A3GUE-XZFZZ&referer=myapp">
                                <img src="images/map_home_bnt.png" alt=""/>
                                <div class="mui-media-body">商家地图</div></a></li>
                            <li class="mui-table-view-cell mui-media mui-col-xs-3"><a href="shops/index.html">
                                <img src="images/merchant_home_bnt.png" alt=""/>
                                <div class="mui-media-body">商家入驻</div></a></li>
                            <li class="mui-table-view-cell mui-media mui-col-xs-3"><a href="shophouse/index.html">
                                <img src="images/set_home_bnt.png" alt=""/>
                                <div class="mui-media-body">设置管理</div></a></li>
                        </ul>
                    </div>

                    <div class="middle"></div>

                    <div class="mui-content tab">
                        <div style="padding: 10px 30px 0 30px;">
                            <div id="segmentedControl" class="mui-segmented-control">
                                <a class="mui-control-item mui-active" href="#item1">
                                    活动商品
                                </a>
                                <a class="mui-control-item" href="#item2">
                                    优选推荐
                                </a>
                                <a class="mui-control-item" href="#item3">
                                    猜你喜欢
                                </a>
                            </div>
                        </div>
                        <div class="list">
                            <div id="item1" class="mui-control-content mui-active">
                                <div id="scroll" class="mui-scroll-wrapper">
                                    <div class="mui-scroll">
                                        <ul class="mui-table-view details">
                                            <li class="mui-table-view-cell">
                                               <div class="photo"></div>
                                                <div class="word">
                                                    <p>武汉东湖海洋世界成人电子广场哈哈哈哈哈啊啊阿啊啊啊啊啊啊啊啊阿啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
                                                    <h5>表演内容:含海兽表演+潜水表演+水事实上还是是是是是是是是是是是是是是是是是是是是是</h5>
                                                    <h4>
                                                        <span><u>¥</u>120</span>
                                                        <s>¥198</s>
                                                    </h4>
                                                </div>
                                            </li>
                                            <li class="mui-table-view-cell">
                                                <div class="photo"></div>
                                                <div class="word">
                                                    <p>武汉东湖海洋世界成人电子广场哈哈哈哈哈啊啊阿啊啊啊啊啊啊啊啊阿啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
                                                    <h5>表演内容:含海兽表演+潜水表演+水事实上还是是是是是是是是是是是是是是是是是是是是是</h5>
                                                    <h4>
                                                        <span><u>¥</u>120</span>
                                                        <s>¥198</s>
                                                    </h4>
                                                </div>
                                            </li>
                                            <li class="mui-table-view-cell">
                                                <div class="photo"></div>
                                                <div class="word">
                                                    <p>武汉东湖海洋世界成人电子广场哈哈哈哈哈啊啊阿啊啊啊啊啊啊啊啊阿啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
                                                    <h5>表演内容:含海兽表演+潜水表演+水事实上还是是是是是是是是是是是是是是是是是是是是是</h5>
                                                    <h4>
                                                        <span><u>¥</u>120</span>
                                                        <s>¥198</s>
                                                    </h4>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div id="item2" class="mui-control-content">
                                <ul class="mui-table-view">
                                    <li class="mui-table-view-cell">
                                        第二个选项卡子项-1
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第二个选项卡子项-2
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第二个选项卡子项-3
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第二个选项卡子项-4
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第二个选项卡子项-5
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第二个选项卡子项-6
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第二个选项卡子项-7
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第二个选项卡子项-8
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第二个选项卡子项-9
                                    </li>
                                </ul>
                            </div>
                            <div id="item3" class="mui-control-content">
                                <ul class="mui-table-view">
                                    <li class="mui-table-view-cell">
                                        第三个选项卡子项-1
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第三个选项卡子项-2
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第三个选项卡子项-3
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="tabbar-with-chat" class="mui-control-content">
        <div class="bgc">
            <img src="images/active/activity_pic.png" alt=""/>
            <div id="rule" class="rule">
                <img src="images/active/rule_activity_icon.png" alt=""/>
                <span>游戏规则</span>
            </div>
            <a class="start" href="activity/index.html"></a>
        </div>
    </div>
    <div id="tabbar-with-contact" class="mui-control-content">
        <div class="mui-content mui-row mui-fullscreen">
            <div class="mui-col-xs-3">
                <div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
                    <a class="mui-control-item mui-active" href="#content1">一级分类</a>
                    <a class="mui-control-item" href="#content2">一级分类</a>
                    <a class="mui-control-item" href="#content3">一级分类</a>
                    <a class="mui-control-item" href="#content4">一级分类</a>
                    <a class="mui-control-item" href="#content5">一级分类</a>
                </div>
            </div>
            <div id="segmentedControlContents" class="mui-col-xs-9">
                <div id="content1" class="mui-control-content mui-active">
                    <ul class="mui-table-view mui-grid-view mui-grid-9">
                            <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                                <img src="images/ex.png" alt=""/>
                                <div class="mui-media-body">二级分类</div></a></li>
                            <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                                <img src="images/ex.png" alt=""/>
                                <div class="mui-media-body">二级分类</div></a></li>
                            <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                                <img src="images/ex.png" alt=""/>
                                <div class="mui-media-body">二级分类</div></a></li>
                            <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                                <img src="images/ex.png" alt=""/>
                                <div class="mui-media-body">二级分类</div></a></li>
                            <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                                <img src="images/ex.png" alt=""/>
                                <div class="mui-media-body">二级分类</div></a></li>
                            <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                                <img src="images/ex.png" alt=""/>
                                <div class="mui-media-body">二级分类</div></a></li>
                            <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                                <img src="images/ex.png" alt=""/>
                                <div class="mui-media-body">二级分类</div></a></li>
                            <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                                <img src="images/ex.png" alt=""/>
                                <div class="mui-media-body">二级分类</div></a></li>
                        </ul>
                </div>
                <div id="content2" class="mui-control-content">
                    <ul class="mui-table-view mui-grid-view mui-grid-9">
                        <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                            <img src="images/ex.png" alt=""/>
                            <div class="mui-media-body">二级分类</div>
                        </a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                            <img src="images/ex.png" alt=""/>
                            <div class="mui-media-body">二级分类</div>
                        </a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                            <img src="images/ex.png" alt=""/>
                            <div class="mui-media-body">二级分类</div>
                        </a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                            <img src="images/ex.png" alt=""/>
                            <div class="mui-media-body">二级分类</div>
                        </a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                            <img src="images/ex.png" alt=""/>
                            <div class="mui-media-body">二级分类</div>
                        </a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                            <img src="images/ex.png" alt=""/>
                            <div class="mui-media-body">二级分类</div>
                        </a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                            <img src="images/ex.png" alt=""/>
                            <div class="mui-media-body">二级分类</div>
                        </a></li>
                    </ul>
                </div>
                <div id="content3" class="mui-control-content">
                    <ul class="mui-table-view mui-grid-view mui-grid-9">
                        <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                            <img src="images/ex.png" alt=""/>
                            <div class="mui-media-body">二级分类</div>
                        </a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                            <img src="images/ex.png" alt=""/>
                            <div class="mui-media-body">二级分类</div>
                        </a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                            <img src="images/ex.png" alt=""/>
                            <div class="mui-media-body">二级分类</div>
                        </a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                            <img src="images/ex.png" alt=""/>
                            <div class="mui-media-body">二级分类</div>
                        </a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                            <img src="images/ex.png" alt=""/>
                            <div class="mui-media-body">二级分类</div>
                        </a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                            <img src="images/ex.png" alt=""/>
                            <div class="mui-media-body">二级分类</div>
                        </a></li>
                    </ul>
                </div>
                <div id="content4" class="mui-control-content">
                    <ul class="mui-table-view mui-grid-view mui-grid-9">
                        <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                            <img src="images/ex.png" alt=""/>
                            <div class="mui-media-body">二级分类</div>
                        </a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                            <img src="images/ex.png" alt=""/>
                            <div class="mui-media-body">二级分类</div>
                        </a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                            <img src="images/ex.png" alt=""/>
                            <div class="mui-media-body">二级分类</div>
                        </a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                            <img src="images/ex.png" alt=""/>
                            <div class="mui-media-body">二级分类</div>
                        </a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                            <img src="images/ex.png" alt=""/>
                            <div class="mui-media-body">二级分类</div>
                        </a></li>
                    </ul>
                </div>
                <div id="content5" class="mui-control-content">
                    <ul class="mui-table-view mui-grid-view mui-grid-9">
                        <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                            <img src="images/ex.png" alt=""/>
                            <div class="mui-media-body">二级分类</div>
                        </a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                            <img src="images/ex.png" alt=""/>
                            <div class="mui-media-body">二级分类</div>
                        </a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                            <img src="images/ex.png" alt=""/>
                            <div class="mui-media-body">二级分类</div>
                        </a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4"><a href="second/index.html">
                            <img src="images/ex.png" alt=""/>
                            <div class="mui-media-body">二级分类</div>
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="tabbar-with-map" class="mui-control-content">
        <div>
            <div class="mybanner">
                <img class="mybm" src="images/my/banner.png" alt="">
                <img class="icon" src="images/ex.png" alt="">
                <span>Bang Bang</span>
                <img id="qd" src="images/my/sign_personal_bnt_n.png" alt="">
            </div>
            <div class="clk">
                <ul class="mui-table-view mui-grid-view mui-grid-9">
                    <li class="mui-table-view-cell mui-media mui-col-xs-3"><a href="#">
                        <img src="images/my/recharge_peresonal_icon.png" style="height: 0.7rem" alt="">
                        <div class="mui-media-body">充值</div>
                    </a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-3"><a href="#">
                        <img src="images/my/deposit_personal_icon.png" style="height: 0.7rem" alt="">
                        <div class="mui-media-body">提现</div>
                    </a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-3"><a href="#">
                        <img src="images/my/bbi_personal_icon.png" style="height: 0.7rem" alt="">
                        <div class="mui-media-body">B币</div>
                    </a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-3"><a href="#">
                        <img src="images/my/integral_personal_icon.png" style="height: 0.7rem" alt="">
                        <div class="mui-media-body">积分</div>
                    </a></li>
                </ul>
            </div>
            <div style="margin-bottom: 0.3rem;" class="listone">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            <img src="images/my/user_czjl.png" alt="">
                            <span>充值记录</span>
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            <img src="images/my/user_dd.png" alt="">
                            <span>我的订单</span>
                            <u class="lookfor">查看订单详情</u>
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            <img src="images/my/user_dz.png" alt="">
                            <span>收货地址</span>
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            <img src="images/my/user_hdjc.png" alt="">
                            <span>活动进程</span>
                            <u class="lookfor">查看活动进程</u>
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            <img src="images/my/user_guanzhu.png" alt="">
                            <span>关注商家</span>
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            <img src="images/my/user_wdgwb.png" alt="">
                            <span>我的购物宝</span>
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            <img src="images/my/user_gift.png" alt="">
                            <span>我的赠品</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div style="margin-bottom: 0.3rem" class="listone">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            <img src="images/my/user_yjfk.png" alt="">
                            <span>意见反馈</span>
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            <img src="images/my/user_fx.png" alt="">
                            <span>分享给好友</span>
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            <img src="images/my/user_lxwm.png" alt="">
                            <span>联系我们</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div style="margin-bottom: 0.1rem" class="listone">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            <img src="images/my/user_qhsj.png" alt="">
                            <span>切换到商家</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>

<script>
    var gallery = mui('.mui-slider');
    gallery.slider({
        interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
    });
</script>
</html>